<template>
	<view class="page">
		<u-navbar title="关于我们" autoBack fixed placeholder titleStyle="color: #232832" leftIconColor="#232832"
			bgColor="#FFFFFF"></u-navbar>
		<c-content :top="statusBarHeight + 44" bgColor="#FFFFFF">
			<view class="logo">
				<image src="/static/default.png" mode="scaleToFill"></image>
			</view>
			<view class="info">
				<view class="author">
					<text>作者：</text>
					<text>XiaoBai</text>
				</view>
				<view class="author">
					<text>邮箱：</text>
					<text>1426169428@qq.com</text>
				</view>
				<view class="blog">
					<text>CSDN主页：</text>
					<u-link :fontSize="13" href="https://blog.csdn.net/qq_53262344?spm=1000.2115.3001.5343"
						text="CSDN主页"></u-link>
				</view>
				<view class="repo">
					<text>项目地址：</text>
					<u-link :fontSize="13" href="https://gitee.com/lwb0118/communication_mp" text="gitee项目地址"></u-link>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="download">
					<text>下载地址：</text>
					<u-link :fontSize="13" href="https://gitee.com/lwb0118/communication_mp" text="APK下载地址"></u-link>
				</view>
				<!-- #endif -->
				<view class="qr">
					<!-- #ifdef APP -->
					<view class="mp-qr">
						<image src="/static/mp-qr.jpg"></image>
						<text>微信小程序</text>
					</view>
					<!-- #endif -->
					<view class="wx-qr">
						<image src="/static/wx_qr.png"></image>
						<text>作者微信</text>
					</view>
				</view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {

			}
		}
	}
</script>

<style scoped lang="scss">
	.logo {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 50px 0;

		image {
			width: 64px;
			height: 64px;
			border-radius: 8px;
		}
	}

	.info {

		view {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin: 10px 22px;
		}

		text {
			font-size: 13px;
			line-height: 18px;
			font-weight: 400;
		}

		text:first-child {
			color: #666666;
		}

		text:last-child {
			color: #232832;
		}

		.qr {
			display: flex;
			align-items: center;
			justify-content: space-around;

			&>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 30px;
				text-align: center;

				text {
					margin-top: 10px;
				}
			}

			image {
				width: 128px;
				height: 128px;
			}
		}
	}
</style>